<!-- otc -->
<template>
  <div class="btc">
    <x-header :left-options="{showBack: false}">{{ detail.name }}</x-header>
    <img src="../../../assets/navBar.png" alt="" width="10" class="navBtnbtc" @click="backBtnbtc">
    <div class="top-wrap">
      <img src="../../../../static/images/fp/f_bg.png" alt="" style="height: 160px;width: 100%;">
      <!-- <div class="banner-text">
        <div class="left">
          <div class="top profit" @click="$router.push({path:'/etfProfit'})"><img src="../../../assets/hand.png" alt="" style="width: 15px; vertical-align: middle;">&nbsp;&nbsp;点击查看历史收益</div>
        </div>
      </div> -->
      <div class="btcbanner">
        <div class="left">
          <div class="">{{ detail.titleRate }}</div>
          <div class="" style="font-size: 25px">{{detail.rate }}</div>
        </div>
      </div>
      <div class="bannerBtn" style="margin: 30px 0 15px 0;">
        <div style="text-align: center;">
          <span v-for="btn in detail.content">{{btn}}</span>
        </div>
      </div>
    </div>
    <div style=" margin-top: 35px;height: 350px;">
      <ve-line :data="chartData"></ve-line>
    </div>
    <group>
      <cell is-link :arrow-direction="show1 ? 'up' : 'down'" @click.native="show1 = !show1">
        <span slot="title" style="font-size: 14px;">基金概况</span>
        <i slot="icon" class="tv-icon"></i>
      </cell>
      <template v-if="show1">
        <div class="showbox show1" style="text-indent: 0em;">
          <p style="font-size: 14px;">BTC指数基金：100%购入等价BTC，记录购买实时的BTC价格以及BTC份额。封闭期365天，在持有365天后可到期赎回，如在赎回日用户未点击赎回按钮，订单将在24：00自动结算，并停止计算收益。在持有期间可在BTC资产交易中进行交易，平台收取千分之二的手续费。</p>
        </div>
      </template>
      <cell is-link :arrow-direction="show2 ? 'up' : 'down'" @click.native="show2 = !show2">
        <span slot="title" style="font-size: 14px;">产品参数</span>
        <i slot="icon" class="book-icon"></i>
      </cell>
      <!-- <template v-if="show2">
        <ul>
          <li class="otcList">
            <div>
              <span>收益率</span>
              <span class="fa r15">5.4%</span>
            </div>
          </li>
          <li class="otcList">
            <div>
              <span>收益类型</span>
              <span class="fa r15">固定收益</span>
            </div>
          </li>
          <li class="otcList">
            <div>
              <span>投资条件</span>
              <span class="fa r15">起投金额1000元</span>
            </div>
          </li>
          <li class="otcList">
            <div>
              <span>封闭期</span>
              <span class="fa r15">7天</span>
            </div>
          </li>
          <li class="otcList">
            <div>
              <span>费用说明</span>
              <span class="fa r15">无任何费用</span>
            </div>
          </li>
          <li class="otcList">
            <div>
              <span>赎回方式</span>
              <span class="fa r15">到期赎回</span>
            </div>
          </li>
        </ul>
      </template> -->
      <template v-if="show2">
        <ul style="font-size: 14px;">
          <li class="otcList">
            <div>
              <span>封闭期</span>
              <span class="fa r15">{{detail.week.replace('天', '')}}天</span>
            </div>
          </li>
          <li class="otcList">
            <div>
              <span>起投条件</span>
              <span class="fa r15">{{detail.join}}</span>
            </div>
          </li>
          <li class="otcList">
            <div>
              <span>预期年华收益率</span>
              <span class="fa r15">{{detail.rate}}</span>
            </div>
          </li>
        </ul>
      </template>
      <cell is-link :arrow-direction="show3 ? 'up' : 'down'" @click.native="show3 = !show3">
        <span slot="title" style="font-size: 14px;">风控保障</span>
        <i slot="icon" class="unbrella-icon"></i>
      </cell>
      <template v-if="show3">
        <div class="showbox show2 show2-ai" style="font-size: 14px;">
          <div class="item">
            <div class="title">
              <span>筛选优质交易平台</span>
            </div>
            <div class="content">
              我们只筛选风控可靠,实力雄厚的交易所进行交易
            </div>
          </div>
          <div class="item">
            <div class="title">
              <span>Https加密传输</span>
            </div>
            <div class="content">
              我们采用国际公认的SSL数字证书,HTTPS加密协议进行数据传输
            </div>
          </div>
        </div>
      </template>
    </group>
    <div class="bot-btn-wrap"></div>
    <div class="investment" @click="buy()">立即投资</div>
  </div>
</template>

<script>
  import { XHeader, VChart, VLine, VTooltip, VScale, Cell, Group } from 'vux'
  import moment from 'dayjs'
  import VCharts from 'v-charts'
  import VeLine from 'v-charts/lib/line.common'
  import http from '../../../service/http.js'
  export default {
    components: {
      XHeader,
      VChart,
      VeLine,
      VTooltip,
      VScale,
      Cell,
      Group
    },
    data() {
      return {
        show1: true,
        show2: true,
        show3: true,
        chartData: [],
        detail: {},
        pid: "",
        chartData: {//展示折现图
          columns: ['日期', 'btc价格趋势'],
          rows: [],
        }
      }
    },
    mounted() {
      this.pid = this.$route.query.pid;
      this.getDetail()
      this.getData();
    },
    methods: {
      backBtnbtc() {
        history.back();
      },
      // 获取折线图数据
      getData() {
        http.get("/product/btcRate").then((res) => {
          if (res.data.status == 200) {
            res.data.rate.forEach((v) => {
              this.chartData.rows.push({
                "日期": v.key,
                "btc价格趋势": v.price,
              })
            })
          }
        })
      },
      async getDetail() {
        http.get("/product/detail?pid=" + this.pid).then((res) => {
          if (res.status == 200) {
            this.detail = res.data.body;
          }
        })
      },
      buy() {
        this.$router.push({ path: "/pay", query: { pid: this.pid, type: this.$route.query.type } })
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "../../../../static/styles/fp-detail";
  body {
    background: #f6f6f6 !important;
  }

  .btc .bt {
    border-bottom: 1px solid #f6f6f6;
  }

  .btc .fr {
    position: relative;
  }

  .btc .fa {
    position: absolute;
  }

  .btc .mgt {
    margin-left: 10px;
  }

  .btc .c4 {
    color: #444;
  }

  .btc .c7 {
    color: #777;
  }

  .btc .r15 {
    right: 15px;
    color: #fea620;
  }

  .btc .investment {
    height: 40px;
    line-height: 40px;
    margin: auto;
    background-image: linear-gradient(-135deg, #FEDF33 0%, #FE9D09 100%);
    color: #fff;
    text-align: center;
    width: 100%;
    position: fixed;
    bottom: 0px;
    /* border-radius: 25px; */
    margin-top: -60px;
  }

  .btc .vux-header {
    position: relative;
    padding: 3px 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #f76c25;
  }

  .btc .icoTop {
    position: absolute;
    top: 0px;
  }

  .btc .btc .vux-header .vux-header-left .left-arrow:before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border: 1px solid #fff;
    border-width: 1px 0 0 1px;
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
    top: 8px;
    left: 7px;
  }

  .btc .icoType {
    height: 40px;
    line-height: 40px;
    background: #fff;
    margin-top: 35px;
    color: #999;
    span {
      margin-left: 15px;
      display: inline-block;
    }
    .active {
      color: #fea620;
      border-bottom: 1px solid #fea620;
    }
  }

  .btc .rateNum {
    position: absolute;
    right: 95px;
    top: 10px;
    text-align: right;
  }

  .btc .positiveRate {
    display: inline-block;
    width: 70px;
    line-height: 24px;
    text-align: center;
    background: #ff1010;
    color: #fff;
    border-radius: 5px;
    position: absolute;
    right: 15px;
    top: 24px;
  }

  .btc .negativeRate {
    display: inline-block;
    width: 70px;
    line-height: 24px;
    text-align: center;
    background: #7ed321;
    color: #fff;
    border-radius: 5px;
    position: absolute;
    right: 15px;
    top: 24px;
  }

  .btc .otcList {
    border-bottom: 1px solid #f6f6f6;
    height: 40px;
    line-height: 40px;
    padding: 0px 15px;
    color: #999;
    position: relative;
  }

  .btc .otcList:nth-child(2n) {
    background: #f6f6f6;
  }

  .btc .bannerBtn span {
    text-align: center;
    height: 25px;
    display: inline-block;
    line-height: 25px;
    border: 1px solid #fff;
    border-radius: 15px;
    color: #fff;
    padding: 0px 8px;
    margin-right: 5px;
  }

  .btc .profit {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 15px;
    border: 1px solid #fff;
    width: 200px;
    height: 30px;
    display: block;
    line-height: 30px;
    text-align: center;
    color: #ff1010;
    font-size: 15px !important;
  }

  .btc .otcList {
    border-bottom: 1px solid #f6f6f6;
    height: 40px;
    line-height: 40px;
    padding: 0px 15px;
    color: #999;
    position: relative;
  }

  .btc .otcList:nth-child(2n) {
    background: #f6f6f6;
  }

  .btc .otcList {
    border-bottom: 1px solid #f6f6f6;
    height: 40px;
    line-height: 40px;
    padding: 0px 15px;
    color: #999;
    position: relative;
  }

  .btc .otcList:nth-child(2n) {
    background: #f6f6f6;
  }

  .btc .fr {
    position: relative;
  }

  .btc .fa {
    position: absolute;
  }

  .btc .mgt {
    margin-left: 10px;
  }

  .btc .c4 {
    color: #444;
  }

  .btc .c7 {
    color: #777;
  }

  .btc .r15 {
    right: 15px;
    color: #fea620;
  }

  .btc .btcbanner {
    color: #ffffff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: -150px;
  }
  .navBtnbtc {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 888;
    transform: rotate(180deg);
  }
</style>